<script setup lang="ts">
  import { ref, watch, computed, reactive } from 'vue';
  import { Notification } from '@arco-design/web-vue';
  import { useBooleanStore } from '@/store';
  import {
    updateRemark,
    cancelUnDelivery,
    reSendPlane,
    reSendRemarkPlane,
    cancelDeliveryPlane,
  } from '@/api/inventory-management';

  const props = defineProps<{
    tableData: any;
  }>();
  const columns: any[] = [
    {
      title: '序号',
      dataIndex: 'PAGEHELPER_ROW_ID',
      key: 'PAGEHELPER_ROW_ID',
      sortable: {
        sortDirections: ['ascend', 'descend'],
      },
    },
    {
      title: '交接单状态',
      dataIndex: 'deliveryStatus',
      sortable: {
        sortDirections: ['ascend', 'descend'],
      },
    },
    {
      title: 'AO号',
      dataIndex: 'aoCode',
      sortable: {
        sortDirections: ['ascend', 'descend'],
      },
    },
    {
      title: '图号',
      dataIndex: 'itemCode',
      sortable: {
        sortDirections: ['ascend', 'descend'],
      },
    },
    {
      title: '型号',
      dataIndex: 'mProductNumber',
      sortable: {
        sortDirections: ['ascend', 'descend'],
      },
    },
    {
      title: '质量编号',
      dataIndex: 'qualityCode',
      sortable: {
        sortDirections: ['ascend', 'descend'],
      },
    },
    {
      title: '数量',
      dataIndex: 'deliveryQty',
      sortable: {
        sortDirections: ['ascend', 'descend'],
      },
    },
    {
      title: '架次',
      dataIndex: 'planeNo',
      sortable: {
        sortDirections: ['ascend', 'descend'],
      },
    },
    {
      title: '装配图号',
      dataIndex: 'repartAss',
      sortable: {
        sortDirections: ['ascend', 'descend'],
      },
    },
    {
      title: '合格证号',
      dataIndex: 'mesCheckQualiticationId',
      sortable: {
        sortDirections: ['ascend', 'descend'],
      },
    },
    {
      title: '托盘号',
      dataIndex: 'toolCode',
      sortable: {
        sortDirections: ['ascend', 'descend'],
      },
    },
    {
      title: '备注',
      dataIndex: 'receiveRemark',
      sortable: {
        sortDirections: ['ascend', 'descend'],
      },
    },
    {
      title: '小车码',
      dataIndex: 'carCode',
      sortable: {
        sortDirections: ['ascend', 'descend'],
      },
    },
    {
      title: '创建时间',
      dataIndex: 'creationDate',
      sortable: {
        sortDirections: ['ascend', 'descend'],
      },
    },
    {
      title: 'matchBill表主键',
      dataIndex: 'msAoMatchBillId',
      sortable: {
        sortDirections: ['ascend', 'descend'],
      },
    },
    {
      title: 'matchInfo表主键',
      dataIndex: 'msAoMatchInfoId',
      sortable: {
        sortDirections: ['ascend', 'descend'],
      },
    },
    {
      title: '组号(groupCode)',
      dataIndex: 'deliveryPlanCode',
      sortable: {
        sortDirections: ['ascend', 'descend'],
      },
    },
    {
      title: '交接单主键',
      dataIndex: 'wmsDeliveryPlanId',
      sortable: {
        sortDirections: ['ascend', 'descend'],
      },
    },
    {
      title: 'ERP交接单主键',
      dataIndex: 'erpWmsDeliveryPlanId',
      sortable: {
        sortDirections: ['ascend', 'descend'],
      },
    },
  ];
  const booleanStore = useBooleanStore();
  // 创建一个响应式的本地副本
  const localTableData = ref<any>();
  // 数据库一共有多少条
  const total = ref<number>(1);
  const pageNum = ref<number>(1);
  const pageSize = ref<number>(10);
  const selectedKeys = ref<string[]>([]);
  // 修改备注弹框
  const visible = ref<boolean>(false);
  const sendVisible = ref<boolean>(false);
  const sendRemarkVisible = ref<boolean>(false);
  const passwordVisible = ref<boolean>(false);

  // 修改后的备注
  const receiveRemark = ref<string>('');
  // 撤销密码
  const password = ref<string>('');
  const selectedTableData = computed(() => {
    return localTableData.value.filter((item: any) =>
      selectedKeys.value?.includes(item.PAGEHELPER_ROW_ID)
    );
  });
  const rowSelection = reactive({
    type: 'checkbox' as 'checkbox' | 'radio',
    showCheckedAll: true,
  });
  // 修改备注
  function changeRemark() {
    if (selectedKeys.value?.length !== 1) {
      Notification.warning({
        title: '提示',
        content: '请选择一条数据',
        closable: true,
      });
    } else {
      visible.value = true;
    }
  }
  async function updateOk() {
    selectedTableData.value[0].receiveRemark = receiveRemark.value;
    const data = await updateRemark(selectedTableData.value[0]);
    if (data.retCode === '200') {
      Notification.success({
        title: '成功',
        content: 'data.message',
        closable: true,
      });
      receiveRemark.value = '';
      selectedKeys.value = [];
      booleanStore.watchUpdate(15);
    } else {
      Notification.error({
        title: '失败',
        content: 'data.message',
        closable: true,
      });
    }
    visible.value = false;
  }
  // 撤销未移交
  async function cancelUndelivery() {
    if (selectedKeys.value?.length === 0) {
      Notification.error({
        title: '失败',
        content: '请至少选择一条数据',
        closable: true,
      });
    } else {
      const data = await cancelUnDelivery(selectedTableData.value);
      if (data.retCode === '200') {
        Notification.success({
          title: '成功',
          content: 'data.message',
          closable: true,
        });
        selectedKeys.value = [];
        booleanStore.watchUpdate(15);
      } else {
        Notification.error({
          title: '失败',
          content: 'data.message',
          closable: true,
        });
      }
    }
  }
  // 重新配送
  function reSend() {
    if (selectedKeys.value?.length === 0) {
      Notification.warning({
        title: '提示',
        content: '请至少选择一条数据',
        closable: true,
      });
      return;
    }
    if (
      selectedTableData.value.some(
        (item: any) =>
          item.deliveryStatus === '10' || item.deliveryStatus === '11'
      )
    ) {
      Notification.warning({
        title: '提示',
        content: '请选择交接单状态为1,2,3的数据',
        closable: true,
      });
      return;
    }
    sendVisible.value = true;
  }
  async function sendOK() {
    const data = await reSendPlane(selectedTableData.value);
    if (data.retCode === '200') {
      Notification.success({
        title: '成功',
        content: 'data.message',
        closable: true,
      });
      selectedKeys.value = [];
      booleanStore.watchUpdate(15);
    } else {
      Notification.error({
        title: '失败',
        content: 'data.message',
        closable: true,
      });
    }
    sendVisible.value = false;
  }
  // 推送备注
  function reSendRemark() {
    if (selectedKeys.value?.length === 0) {
      Notification.warning({
        title: '提示',
        content: '请至少选择一条数据',
        closable: true,
      });
      return;
    }
    if (
      selectedTableData.value.some(
        (item: any) =>
          item.deliveryStatus === '10' || item.deliveryStatus === '11'
      )
    ) {
      Notification.warning({
        title: '提示',
        content: '请选择交接单状态为1,2,3的数据',
        closable: true,
      });
      return;
    }
    sendRemarkVisible.value = true;
  }
  async function sendRemarkOK() {
    const data = await reSendRemarkPlane(selectedTableData.value);
    if (data.retCode === '200') {
      Notification.success({
        title: '成功',
        content: 'data.message',
        closable: true,
      });
      selectedKeys.value = [];
      booleanStore.watchUpdate(15);
    } else {
      Notification.error({
        title: '失败',
        content: 'data.message',
        closable: true,
      });
    }
    sendRemarkVisible.value = false;
  }

  // 撤销配送
  function cancelDelivery() {
    if (selectedKeys.value?.length === 0) {
      Notification.warning({
        title: '提示',
        content: '请至少选择一条数据',
        closable: true,
      });
      return;
    }
    passwordVisible.value = true;
  }
  // 撤销保存
  async function deliveryOk() {
    if (password.value !== '123456') {
      Notification.error({
        title: '失败',
        content: '您输入的密码错误,请仔细检查后重新输入',
        closable: true,
      });
      return;
    }
    const data = await cancelDeliveryPlane(selectedTableData.value);
    if (data.retCode === '200') {
      Notification.success({
        title: '成功',
        content: 'data.message',
        closable: true,
      });
      selectedKeys.value = [];
      booleanStore.watchUpdate(15);
      password.value = '';
    } else {
      Notification.error({
        title: '失败',
        content: 'data.message',
        closable: true,
      });
    }
    passwordVisible.value = false;
  }
  // 监听props.tableData的变化，并更新本地副本
  watch(
    () => props.tableData,
    () => {
      localTableData.value = props.tableData?.list;
      total.value = props.tableData?.total || 0;
    },
    { immediate: true }
  );
  // 监听页面变化
  watch([pageNum, pageSize], () => {
    booleanStore.setPage(pageNum.value, pageSize.value, 32);
  });
  // 监听已选择数据的序号，并更新到已选择表格数据行字段
  function change(e: any) {
    pageNum.value = e;
  }
  function changeSize(e: any) {
    pageSize.value = e;
  }
</script>

<template>
  <a-space style="margin-bottom: 16px">
    <a-button type="outline" size="large" @click="changeRemark"
      >修改备注
    </a-button>
    <a-button type="outline" size="large" @click="cancelUndelivery"
      >撤销未移交
    </a-button>
    <a-button type="outline" size="large" @click="reSend">重新配送 </a-button>
    <a-button type="outline" size="large" @click="reSendRemark"
      >推送备注
    </a-button>
    <a-button type="outline" size="large" @click="cancelDelivery"
      >撤销配送
    </a-button>
  </a-space>
  <div>
    <a-table
      v-model:selected-keys="selectedKeys"
      :stripe="true"
      class="top-table"
      :pagination="false"
      :columns="columns"
      :data="localTableData"
      :row-selection="rowSelection"
      row-key="PAGEHELPER_ROW_ID"
    >
    </a-table>
    <div class="page-position">
      <a-pagination
        :total="total"
        :current="pageNum"
        :page-size="pageSize"
        show-total
        show-jumper
        show-page-size
        @change="change"
        @update:page-size="changeSize"
      />
    </div>
  </div>
  <a-modal
    v-model:visible="visible"
    @ok="updateOk"
    @cancel="() => (visible = false)"
  >
    <template #title> 质量编号修改 </template>
    <a-space direction="vertical" fill>
      <a-input
        v-model="receiveRemark"
        placeholder="请输入修改后的备注"
        size="large"
        allow-clear
      />
    </a-space>
  </a-modal>
  <a-modal
    v-model:visible="sendVisible"
    @ok="sendOK"
    @cancel="() => (sendVisible = false)"
  >
    <template #title> 提示</template>
    <a-space direction="vertical" fill>
      <div class="div-font">
        <icon-exclamation-circle
          size="32px"
          style="margin-right: 6px; color: red"
        />确定是否重新推送？</div
      >
    </a-space>
  </a-modal>
  <a-modal
    v-model:visible="sendRemarkVisible"
    @ok="sendRemarkOK"
    @cancel="() => (sendRemarkVisible = false)"
  >
    <template #title> 提示</template>
    <a-space direction="vertical" fill>
      <div class="div-font">
        <icon-exclamation-circle
          size="32px"
          style="margin-right: 6px; color: red"
        />确定是否推送备注？</div
      >
    </a-space>
  </a-modal>
  <a-modal v-model:visible="passwordVisible">
    <template #title>撤销配送</template>
    <a-space direction="vertical" fill>
      <a-input-password
        v-model="password"
        placeholder="请输入密码"
        size="large"
        allow-clear
      />
    </a-space>
    <template #footer>
      <div class="btn-position">
        <a-button size="large" @click="() => (passwordVisible = false)"
          >取消</a-button
        >
        <a-button
          style="margin-left: 10px"
          type="primary"
          size="large"
          @click="deliveryOk"
          >确认</a-button
        >
      </div>
    </template>
  </a-modal>
</template>

<style scoped>
  .top-table {
    white-space: nowrap;
  }
  .page-position {
    margin-top: 20px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .div-font {
    font-size: 18px;
    display: flex;
    align-items: center;
    text-align: center;
  }
  .btn-position {
    display: flex;
    justify-content: end;
    align-items: center;
    text-align: center;
  }
</style>
